<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="zh">
    <title>分配角色</title>

    <%@include file="common/head.jsp" %>
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
    </head>
    <script type="text/javascript">
        $(function () {

            $("#toRightLi").click(function () {
                $("select:eq(0)>option:selected").prependTo("select:eq(1)");
            });

            $("#toLeftLi").click(function () {
                $("select:eq(1)>option:selected").prependTo("select:eq(0)");
            });

            $("#submitBtn").click(function () {
                // 在提交表单前把“已分配”部分的 option 全部选中
                $("select:eq(0)>option").prop("selected", "selected");
                // 为了看到上面代码的效果，可以暂时不让表单提交
                // return false;
            });
        })
    </script>
    <body>

        <%@include file="common/nav.jsp" %>

        <div class="container-fluid">
            <div class="row">

                <%@include file="common/side-bar.jsp" %>

                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <ol class="breadcrumb">
                        <li><a href="javascript:">首页</a></li>
                        <li><a href="javascript:">数据列表</a></li>
                        <li class="active">分配角色</li>
                    </ol>
                    <div class="panel panel-default">
                        <div class="panel-body" style="margin-left: 8%">
                            <form role="form" class="form-inline" action="assign/do/assignRole.html" method="post">
                                <input type="hidden" name="adminId" value="${requestScope.adminId}">
                                <input type="hidden" name="pageNum" value="${requestScope.pageNum}">
                                <input type="hidden" name="keyword" value="${requestScope.keyword}">
                                <div class="form-group">
                                    <label>已分配角色列表</label><br><br>
                                    <select name="roleIds" class="form-control" multiple size="15"
                                            style="width:200px;overflow-y:auto;">
                                        <c:forEach items="${requestScope.assignedRoleList}" var="role">
                                            <option style="text-align: center;font-size: large"
                                                    value="${role.id}">${role.roleName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <ul>
                                        <li id="toRightLi" class="btn btn-primary glyphicon glyphicon-arrow-right"></li>
                                        <br>
                                        <li id="toLeftLi" class="btn btn-primary glyphicon glyphicon-arrow-left"
                                            style="margin-top:20px;"></li>
                                    </ul>
                                </div>
                                <div class="form-group" style="margin-left:40px">
                                    <label>未分配角色列表</label><br><br>
                                    <select class="form-control" multiple size="15"
                                            style="width:200px;overflow-y:auto;">
                                        <c:forEach items="${requestScope.unassignedRoleList}" var="role">
                                            <option style="text-align: center;font-size: large"
                                                    value="${role.id}">${role.roleName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div style="margin-top: 2%">
                                    <button id="submitBtn" type="submit" class="btn btn-lg btn-success btn-block"
                                            style="width:100px">提交更改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </body>
</html>
